<template>
  <div class="particulars">
    <HeaderIndex :isReturnText="false" :isClose="false" :isService="true" />
    <iframe id="myIframe" :src="txtUrl" frameborder="0" width="100%" scrolling="auto" class="content"></iframe>
  </div>
</template>

<script>
import { decrypt } from "@/utils/encryption";
import HeaderIndex from "components/header/index.vue";
import { particulars } from "@/api";
import dayjs from "dayjs";
export default {
  data() {
    return {
      txtUrl: null, //文章链接
    };
  },
  computed: {
    //计算属性 , 设置iframe高度为窗口高度少100px
    calHeight() {
      return window.innerHeight - 100 + "px";
    },
  },
  components: {
    HeaderIndex,
  },
  async created() {
    const data = await particulars(this.$route.query.id);
    const params = {
      object_id: data.data.fileId, //必须，附件ID
      object_version: dayjs().unix(), //必须，附件版本号,时间戳。不能超过10位数
      userId: JSON.parse(localStorage.getItem("userInfo")).userID, //必须，当前用户ID
      textConfig: {
        useWps: "preview", //固定
        replaceUrl: false, //固定
        watermark: {
          title: encodeURIComponent(`${JSON.parse(localStorage.getItem("userInfo")).userName}#TimeStamp#${dayjs().valueOf()}`), //用户名+当前时间，设置水印
          addTimestamp: true, //固定
        },
      },
    };
    this.txtUrl = decrypt(process.env.VUE_APP_WPS_PREVIEW_URL) + encodeURIComponent(JSON.stringify(params));
  },
};
</script>

<style scoped lang="less">
.particulars {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
  }
}
</style>